import React, { useState} from 'react';
import {useNavigate } from 'react-router-dom';
import { Input ,ConfigProvider} from 'antd';

const { Search } = Input;

export default function SearchInput() {
  const navigate = useNavigate();
  const [searchText, setSearchText] = useState(''); 
  const onSearch = (value) => {
       setSearchText(value); 
       console.log(searchText);
       navigate(`/searchpage?keyword=${value}`);
  };

  return (
    <ConfigProvider
    theme={{
      token: {
        // Seed Token，影响范围大
        colorPrimary: '#30B30E',
        borderRadius: 2,

        // 派生变量，影响范围小
        colorBgContainer: '#f6ffed',
      },
    }}
  >
        <div className='search'>
        <Search
        placeholder="搜索"
      onSearch={onSearch}
      onChange={(e) => setSearchText(e.target.value)}
       style={{
        width: 350,
        }}
    />
    </div>


    </ConfigProvider>

  );
}

